<!--
 * @Author: zhouwr 1551541860@qq.com
 * @Date: 2024-02-12 19:18:18
 * @LastEditors: zhouwr 1551541860@qq.com
 * @LastEditTime: 2024-03-05 09:37:00
 * @FilePath: /jeecgboot-vue3/src/views/activiti/model/components/ActModelBpmnModeler.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <BasicModal destroyOnClose title="流程模型设计" v-bind="$attrs" @register="registerModal" @visible-change="handlerVisibleChange">
    <div class="containers">
      <a-space>
        <a-button @click="downloadBpmn">
          <a-icon type="download" />
          保存BPMN
        </a-button>
        <a-button @click="downloadSvg">
          <a-icon type="download" />
          保存SVG
        </a-button>

        <a-upload :before-upload="beforeUpload">
          <a-button>
            <a-icon type="upload" />
            导入BPMN
          </a-button>
        </a-upload>

        <a-button-group>
          <a-button @click="handlerUndo">撤销</a-button>
          <a-button @click="handlerRedo">恢复</a-button>
        </a-button-group>

        <a-button-group>
          <a-button @click="handlerZoom(0.1)">放大</a-button>
          <a-button @click="handlerZoom(-0.1)">缩小</a-button>
          <a-button @click="handlerZoom(0)">还原</a-button>
        </a-button-group>
      </a-space>

      <!-- <div class="canvas" ref="containerEl"></div>
      <div id="properties-panel"></div> -->

      <!-- <BasicBpmn @register="registerBpmn" /> -->
    </div>
  </BasicModal>
</template>

<script setup lang="ts">
  import { ref, watch, markRaw, nextTick } from 'vue'
  import { BasicModal, useModalInner } from '@/components/Modal'
  import { getModelXml } from '../ActModel.api'
  import { bpmnInit, handlerImportXML, handlerRedo, handlerUndo, handlerZoom, beforeUpload, openBpmn, downloadBpmn, downloadSvg } from './ActModelBpmnModeler.api'
  import { BpmnStore } from './bpmn/Bpmn.api'
  import customTranslate from './customTranslate/customTranslate'
  import { BasicBpmn, useBpmnModeler } from '/@/components/Bpmn'

  const containerEl = ref<HTMLElement>()
  const modelId = ref<String>()

  watch(
    // 这种写法会侦听到 props 中 test 的变化
    () => modelId.value,
    (modelId: string) => {
      console.log('ActModelEditor 侦听modelId', modelId)
    }
  )

  const [registerBpmn, { importXML, initBpmnModeler }] = useBpmnModeler()

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    console.log('useModalInner', data)
    modelId.value = data.modelId

    const customTranslateModule = {
      translate: ['value', customTranslate],
    }

    initBpmnModeler()
    // BpmnStore.initBpmnModeler({
    //   container: containerEl.value,
    //   //添加控制板
    //   propertiesPanel: {
    //     parent: '#properties-panel',
    //   },
    //   additionalModules: [BpmnPropertiesPanelModule, BpmnPropertiesProviderModule, CamundaPlatformPropertiesProviderModule, customTranslateModule],
    //   moddleExtensions: {
    //     activiti: activitiModdleDescriptors,
    //   },
    // })
    // getModelXml(
    //   { id: data.modelId },
    //   async (data) => {
    //     const res = await importXML(data.xmlContent)
    //     // const res = await BpmnStore.importXML(data.xmlContent)
    //     console.log(res)

    //     if (res.length) {
    //       console.warn('importSuccess warnings', res)
    //     }
    //   },
    //   () => {
    //     BpmnStore.createDefaultXML()
    //   }
    // )

    setModalProps({
      confirmLoading: false,
      showCancelBtn: true,
      showOkBtn: true,
      defaultFullscreen: true,
    })
  })

  const handlerVisibleChange = (visible: boolean) => {
    console.log('流程模型设备窗口visible', visible)
    if (visible) {
    } else {
      modelId.value = ''
    }
  }
</script>

<style scoped lang="less">
  .containers {
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
  }
  .canvas {
    width: 100%;
    height: 100%;
  }
  #properties-panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
  }
</style>
